<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style>
			body,ul,h3,h4,li{margin:0;padding:0;}
			ul{list-style:none;}
			body{background-color: #ddd;}
			.container{
				margin:50px auto;
				width:856px;
				height:642px;
				border:1px solid transparent;
				/* background-color: pink; */
			}
			.container .info{
				float:left;
				border:1px solid transparent;
				width:240px;
				height:640px;
				/* background-color: #000; */
			}
			.container .info .head-portrait{
				margin-bottom:10px;
				width:222px;
				height:312px;
				padding:10px;
				background-color: #000;
				
				text-align:center;
			}
			.container .info .head-portrait h3{
				margin:36px 25px 0;
				font-size:21px;
				color:#fff;
			}
			.container .info .head-portrait h4{
				font-size:18px;
			}
			.container .info .people{
				margin:30px 25px 45px;
				width:160px;
				height:160px;
				border:2px solid #ffd041;
				border-radius:50%;
			/* 	background-image: url('1.png');
				background-position: center center;
				background-repeat: no-repeat;
				background-size:cover; */
				background: url('1.png') no-repeat center center/cover;
			}
			.container .info .list{
				height:300px;
				border:1px solid transparent;
				background-color: #ffd041;
			}
			.container .info .list li{
				height:20px;
				padding:10px;
				border-bottom:1px solid #000;
				text-indent:50px;
				line-height:20px;
				text-align:right;
				cursor:pointer;
			}
			.container .info .list .top{
				margin-top:10px;
				background-color: #000;
				color:#ffd041;
			}
		
			.container .profile{
				float:left;
				margin-left:10px;
				border:1px solid transparent;
				width:602px;
				height:642px;
				/* background-color: blue; */
			}
			.container .profile .welcome{
				height:100px;
				border:1px solid transparent;
				margin-bottom:10px;
				background-color: #000;
			}
			.container .profile .welcome h3{
				margin:52px 27px 24px;
				font-family:'宋体';
				font-size:23px;
				color:#fff;
			}
			.container .profile .welcome h3 span{
				color:#ffd041;
			}
			.container .profile .job{
				height:528px;
				border:1px solid transparent;
				background-color: #fff;
			}
			.container .profile .job h3{
				margin:20px 20px 10px;
				
			}
			.container .profile .job mark{
				color:#ffd041;
			}
			.container .profile .job span{
				color:#000;
			}
			.container .profile .job figure{
				color:#b5b5b5;
			}
			.container .profile .job article{
				text-indent:10px;
				font-size:13px;
				margin-bottom:90px;
			}
			.container .profile .job .my-info{
				margin:0 0 35px 50px;
			}
			.container .profile .job ul{
				width:500px;
				height:170px;
				/* background-color: pink; */
				margin-left:54px;
			}
			.container .profile .job section{
				display:inline-block;
				width:100px;
				height:35px;
				background-color: #000;
				margin-top:10px;
				margin-right:5px;
				line-height:35px;
				text-align:center;
				color:#fff;
				vertical-align:middle;
			}
			.container .profile .job meter{
				width:300px;
				height:35px;
				margin-top:10px;
				vertical-align:middle;
			}
			
		</style>
	</head>
	<body>
		<div class='container'>
			<aside class='info'>
				<section class='head-portrait'>
					<mark>
						<h3>Wendy<span style='color:#ffd041;'>Alex</span></h3>
						<h4 style='color:#fff;'>前端工程师</h4>
					</mark>
					<section class='people'></section>
				</section>

				<nav class='list'>
					<ul>
						<li class='top'>HOME | 家庭地址</li>
						<li>RESUME | 个人简介</li>
						<li>CONTACT | 联系方式</li>
						<li>PORTFOLIO | 工作经验</li>
					</ul>
					<section class='shadow'></section>
				</nav>
			</aside>
			<section class='profile'>
				<header class='welcome'>
					<h3><span>Welcome To </span>My Profile</h3>
				</header>
				<section class='job'>
					<h3>
						Hello!I'm <mark><span> Wendy Alex</span></mark>
					</h3>
					<figure>
						<figcaption>Web developer</figcaption>
						<article>主攻前端和NodeJS开发，6年+前端开发经验，呆过大公司和小团队，从0组建20人前<wbr>端NodeJS混合开发团队，带领团队利用最新技术解决业务快速发展过程中的各种业务场景<wbr>问题。熟悉客户端开发，有多个上架APP，有java开发经验</article>
					</figure>
					<h3 class='my-info'>My Info</h3>
					<ul>
						<li>
							<section>div+css</section>
							<meter max='80' min='0' low='20' high='60' value='61'></meter>
						</li>
						<li>
							<section>javascript</section>
							<meter max='80' min='0' low='20' high='40' value='41'></meter>
						</li>
						<li>
							<section>h5+css3</section>
							<meter max='80' min='0' low='20' high='30' value='30'></meter>
						</li>
						<li>
							<section>character</section>
							<meter max='80' min='0' low='20' high='70' value='71'></meter>
						</li>
					</ul>
				</section>
			</section>
		</div>
	</body>
</html>
